<!--
 * @Author: gyp
 * @Date: 2020-05-11 09:13:28
 * @LastEditors: gyp
 * @LastEditTime: 2020-06-04 14:37:18
 * @Description: 巡逻排名列表
 * @FilePath: \sy_kjxc_web\src\views\screen\components\patrolrankList.vue
 -->
<template>
  <ul class="patrolrankList">
    <li class="rankItem" v-for="(item, index) in data" :key="index">
      <div class="flexCenter">
        <span :class="['index', {'active': [1,2,3].includes(index+1)}]">{{ index+1 }}</span>
        <span class="platform">{{ (item.parentName ? item.parentName : '') + (item.platformName ? item.platformName : '')}}</span>
      </div>
      <span class="distance">{{ item.distance || 0 }}公里</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'patrolrank-list',
  props: ['data']
};
</script>
<style lang="less" scoped>
.patrolrankList {
  .flexCenter{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rankItem {
    padding: 8px 15px;
    border-bottom: solid 1px #2c58a6;
    color: #eee;
    font-size: 14px;
    cursor: pointer;
    .flexCenter();
    &:first-of-type {
      padding: 2px 15px 8px;
    }
    .index {
      max-width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.active {
        font-size: 18px;
        color: #25f3e6;
      }
    }
    .platform {
      margin: 0 8px;
    }
    &:hover {
      color: #25f3e6;
    }
  }
}
</style>
